<template>
  <div>
    <div>
      <button @click="componentName = 'One'">One</button>
      <button @click="componentName = 'Two'">Two</button>
      <button @click="componentName = 'Three'">Three</button>
    </div>
    <!-- 
      动态组件:
        可以通过 Vue 的 <component> 元素加一个特殊的 is 属性 来实现动态组件
        is属性的值就是一个字符串,代表的就是要替换当前component组件的组件名称
     -->
    <!-- 
      缓存组件
        <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
        属性:
          include属性:包含哪些组件需要被缓存
            - 字符串 'One,Two'
            - 数组  ['One','Two']
            - 正则 /One|Two/g

          exclude属性:包含哪些组件不需要被缓存,其他和include类似
      -->
    <!-- <keep-alive include="One,Two">
      <component :is="componentName"></component>
    </keep-alive> -->
    <keep-alive :include="['One', 'Two']">
      <component :is="componentName"></component>
    </keep-alive>


    <!-- <keep-alive :include="/One|Two/g">
      <transition name="a" mode="out-in">
        <component :is="componentName" />
      </transition>
    </keep-alive> -->


  </div>
</template>

<script>
import One from '@/components/One'
import Two from '@/components/Two'
import Three from '@/components/Three'
export default {
  name: 'App',
  components: {
    One,
    Two,
    Three
  },
  data() {
    return {
      componentName: 'One'
    }
  }
}
</script>

<style>
</style>
